<template>
  <div class="w-full h-full" ref="tableAreaRef">
    <el-table
      :data="tableData"
      :tree-props="treeProps"
      row-key="id"
      default-expand-all
      :row-class-name="tableRowClassName"
      :span-method="arraySpanMethod"
      class="orderTable"
      ref="tableRef"
      style="height: calc(100%)"
    >
      <el-table-column prop="mergeColumn" :label="$t('basic.序号')" width="80">
        <template #default="{ row }">
          <div v-if="row.saleSkus" class="goodList-item-header flex_aic_jcsb">
            <div class="flex_aic_jcsb" :style="`width: ${tableWidth - 240}px;`">
              <div class="color-999999">
                <span>{{ $t('service.table.订单号') }}：{{ row.sourceSaleNo }}</span>
                <span class="ml20">{{ $t('service.table.退款单号') }}：{{ row.saleNo }}</span>
                <!-- <span class="ml20">{{ $t('service.table.店铺') }}【{{ row["tenantName" + locale] }}】</span> -->
                <span class="ml32">{{ $t('service.table.退款方式') }}：</span>
                <span class="color-primary">{{
                    $t(`service.status.${refundTypeMap[row.refundAskType]}`) || "--"
                }}</span>
                <span class="ml32">{{ $t('service.table.退款状态') }}：</span>
                <span class="color-primary">{{
                    $t(`service.status.${refundStatusMap[row.refundStatus]}`) || "--"
                }}</span>
              </div>
              <div class="color-999999">
                <span
                  >{{ $t('service.table.申请时间') }}：{{
                    moment(row.refundAskTime).format("YYYY-MM-DD HH:mm:ss")
                  }}</span
                >
              </div>
            </div>
          </div>
          <span v-else>{{ row.index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="mergeColumn" :label="$t('service.table.用户信息')" width="300">
        <template #default="{ row }">
          <div class="border-left-right">
            <div><span class="color-999999">{{ $t('service.table.用户ID') }}：</span>{{ row.vipId }}</div>
            <div>
              <span class="color-999999">{{ $t('service.table.用户名') }}：</span>{{ row.vipNickName }}
            </div>
            <div>
              <span class="color-999999">{{ $t('service.table.手机号码') }}：</span>{{ row.vipPhone }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="skuId" :label="$t('service.table.商品ID')" width="200" />
      <el-table-column prop="name" :label="$t('service.table.商品信息')" width="400">
        <template #default="{ row }">
          <div class="flex_aic">
            <el-image
              style="width: 82px; height: 82px"
              :src="row.skuSpecDetailImage"
              alt=""
              fit="cover"
              class="flex-shrink-0"
            />
            <div class="ml8">
              <div class="fs-14">{{ row["skuName" + locale] }}</div>
              <span class="color-999999">
                {{ row["skuClassify1Name" + locale] }} >
                {{ row["skuClassify2Name" + locale] }}
              </span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="tenantId" :label="$t('service.table.商户信息')" width="200">
        <template #default="{ row }">
          <div>
            <div>{{row["tenantName" + locale]}}</div>
            <div>{{row.tenantId}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="goodsSpec" :label="$t('service.table.商品规格')" width="200">
        <template #default="{ row }">
          <div class="flex_aic">
            <span class="goods_spec flex_aic gap-4 flex-wrap">
              <span v-for="spec in row.skuSpecDetail" :key="spec.specId"
                >{{ spec["specName" + locale] }}-{{
                  spec["specDetailName" + locale]
                }}</span
              >
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        :label="$t('service.table.商品售价')"
        width="200"
        :formatter="(row) => '￥' + row.skuStockPrice"
      />
      <el-table-column :prop="'skuCount'" :label="$t('service.table.购买数量')" width="200" />
      <el-table-column
        prop="payReal"
        :label="$t('service.table.实付金额')"
        width="200"
        :formatter="(row) => '￥' + row.payReal"
      />
<!--      <el-table-column prop="mergeColumn" label="申请时间" width="200" :formatter="(row) => moment(row.refundAskTime).format('YYYY-MM-DD HH:mm:ss')"/>-->
      
      <el-table-column prop="mergeColumn" :label="$t('service.table.收货地址')" width="300">
        <template #default="{ row }">
          <div class="border-left-right">
            <div>
              <span class="color-999999">{{ $t('service.table.收货人') }}：</span>{{ row.vipAddressName }}
            </div>
            <div>
              <span class="color-999999">{{ $t('service.table.手机号码') }}：</span
              >{{ row.vipAddressPhone }}
            </div>
            <div>
              <span class="color-999999">{{ $t('service.table.地址') }}：</span
              >{{ row["vipAddressProvince" + locale] }}
              {{ row["vipAddressCity" + locale] }}
              {{ row["vipAddressArea" + locale] }}
              {{ row.vipAddressAddress }}
              {{ row.vipAddressDetail }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="mergeColumn" :label="$t('service.table.退款金额')" width="300" :formatter="(row) => '￥' + row.refundReal ?
      row.refundReal : ''"/>
<!--      <el-table-column prop="mergeColumn" label="抵扣" width="300">
        <template #default="{ row }">
          <div class="border-left-right">
            <div>
              <span class="color-999999">优惠券抵扣金额：</span
              >{{ row.payDiscountCoupon }}
            </div>
            <div>
              <span class="color-999999">积分抵扣金额：</span
              >{{ row.payDiscountPoint }}
            </div>
          </div>
        </template>
      </el-table-column>-->
      <el-table-column prop="mergeColumn" :label="$t('service.table.操作')" fixed="right" width="200">
        <template #default="{ row }">
          <div class="operate_btn" @click="handleReceive(row)">{{ $t('service.table.查看详情') }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick, watch } from "vue";
import moment from "moment";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import { orderStatusMap, refundStatusMap, refundTypeMap } from "./data";
import { getLangs } from "@/i18n/tools";

const { locale, t: $t } = useI18n();
const router = useRouter();
const columns = [
  {
    label: $t('service.table.商品ID'),
    inSku: true,
    prop: "skuId",
    width: 200,
  },
  {
    label: $t('service.table.商品信息'),
    prop: "goodsInfo",
    width: 400,
  },
  {
    label: $t('service.table.商品规格'),
    prop: "goodsSpec",
    width: 200,
  },
  {
    label: $t('service.table.商品售价'),
    inSku: true,
    prop: "skuStockPrice",
    width: 120,
  },
  {
    label: $t('service.table.购买数量'),
    inSku: true,
    prop: "skuCount",
    width: 120,
  },
  {
    label: $t('service.table.用户信息'),
    prop: "userInfo",
    width: 200,
  },
  {
    label: $t('service.table.收货地址'),
    prop: "addressInfo",
    width: 200,
  },
  {
    label: "抵扣",
    prop: "deduction",
    width: 200,
  },
  {
    label: $t('service.table.实付金额'),
    prop: "payReal",
    width: 120,
  },
  {
    label: $t('service.table.操作'),
    prop: "operate",
    width: 200,
    flex1: true,
  },
];

const tableRef = ref();
const tableAreaRef = ref();
const tableWidth = ref(0);
const props = defineProps({
  goodList: {
    type: Array,
    default: () => [],
  },
  type: {
    type: String,
    default: "",
  },
});
const tableData = ref([])
const treeProps = reactive({
  checkStrictly: false,
  children: "saleSkus",
});

const tableRowClassName = ({ row, rowIndex }) => {
  if (row.saleSkus) {
    return "warning-row";
  }
  return "";
};
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // console.log("column===", column);

  if (row.saleSkus && columnIndex === 0) {
    return [1, 100];
  }
  if (row.saleSkus && columnIndex !== 0) {
    return [1, 0];
  }
  if (!row.saleSkus) {
    if (column.property === "mergeColumn") {
      console.log("row===");

      if (row.saleSkusIndex === 0) {
        return [row.saleSkusLength, 1];
      } else {
        return [0, 1];
      }
    }
  }
};
// 退款状态： -6退款完成 -5待卖家签收 -4退款驳回 -3退款中 -2申请退款 -1撤销申请 0未申请
// 订单状态：-1已取消，1待付款 3待发货，4待收货，5已完成
const statusMap = {
  "-1": $t('service.status.已取消'),
  1: $t('service.status.待付款'),
  3: $t('service.status.待发货'),
  4: $t('service.status.待收货'),
  5: $t('service.status.已完成'),
};

const handleReceive = (row) => {
  Storage.set("orderDetail", row, true);
  router.push({
    path: "/manage_product/service/detail",
    query: {
      id: row.saleId,
    },
  });
};

onMounted(() => {
  tableWidth.value = tableAreaRef.value.clientWidth;
  window.addEventListener("resize", function () {
    nextTick(() => {
      tableWidth.value = tableAreaRef.value.clientWidth;
    });
  });
});

watch(
  () => props.goodList,
  () => {
    const mergeKey = [
      "vipNickName",
      "vipPhone",
      "vipAddressName",
      "vipAddressPhone",
      "vipAddressAddress",
      "vipAddressDetail",
      "payDiscountCoupon",
      "payDiscountPoint",
      "sendNo",
      "sendCode",
      "sendName",
      "refundReal",
      "refundAskTime",
      "index"
    ];
    getLangs().forEach((el3) => {
      mergeKey.push(`vipAddressProvince${el3}`);
      mergeKey.push(`vipAddressCity${el3}`);
      mergeKey.push(`vipAddressArea${el3}`);
      mergeKey.push(`tenantName${el3}`);
    });

    tableData.value = props.goodList?.map((el, index) => {
      el.index = index
      el.saleSkus?.forEach((el2, i) => {
        mergeKey.forEach((key) => {
          el2[key] = el[key];
        });

        el2.saleSkusIndex = i;
        el2.saleSkusLength = el.saleSkus.length;
      });
      return el;
    });
  }
);
</script>
<style lang="scss" scoped>
.goodList {
  .table-header {
    height: 40px;
    margin-bottom: 10px;
    border-radius: 3px;
    background: #f5f5f5;
    .table-header-item {
      flex-shrink: 0;
      height: 40px;
      background: #f5f5f5;
      color: #333;
      font-size: 14px;
      line-height: 30px;
      padding: 0 13px;
    }
  }

  .goodList-item {
    .goodList-item-header {
      width: 100%;
      height: 35px;
      padding: 0 13px;
      background: #fff1e8;
      > div {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
      }
    }
    .goodList-item-content {
      .sku {
        padding: 6px 0;
        border-bottom: 1px solid #f5f5f5;
        > div {
          padding: 0 13px;
        }
      }
    }
  }
}

.orderTable {
  :deep(.el-table__expand-icon) {
    display: none !important;
  }

  :deep(.warning-row) {
    background-color: #fff1e8;
    height: 20px;
    .el-table__cell {
      padding: 4px 0;
    }
  }
  :deep(.el-table__placeholder) {
    display: none;
  }
  :deep(.el-table__indent) {
    display: none;
  }
  .goods_spec {
    margin-top: 12px;
    font-size: 12px;
    flex-wrap: wrap;
    span {
      white-space: nowrap;
      padding: 2px 5px;
      background: #f5f5f5;
      border-radius: 3px;
    }
  }
  .operate_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 26px;
    margin-top: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    color: #666;
    font-size: 12px;
    cursor: pointer;
    &:first-child {
      margin-top: 0;
    }
  }

  .border-left-right {
    // border-left: 1px solid #ebeef5;
  }
}
</style>
